<script setup>
import {ref} from "vue";

const searchVal = ref('')
const search = (e) => {
  searchVal.value = e
}
</script>

<template>
  <view class="container">
    <view class="search-box">
      <up-input
          placeholder="请输入学生姓名/学号关键词查询"
          placeholder-style="font-size:32rpx;color:rgba(0, 0, 0, 0.25);"
          prefix-icon="search"
          prefix-icon-style="font-size:42rpx" shape="circle" @change="search"></up-input>
    </view>

    <view v-if="searchVal.length === 0" class="want">
      <view class="header">
        <view class="title">
          <up-text bold color="rgba(0, 0, 0, 1)" size="28rpx" text="猜你想找"></up-text>
        </view>
        <view class="del">
          <up-icon name="trash" size="32rpx"></up-icon>
        </view>
      </view>
      <view class="main">
        <view class="pre-select">
          <view class="text">
            <up-text color="#777" size="32rpx" text="王子艺"></up-text>
          </view>
          <view class="text">
            <up-text color="#777" size="32rpx" text="江晓宏"></up-text>
          </view>
          <view class="text">
            <up-text color="#777" size="32rpx" text="林北志"></up-text>
          </view>
          <view class="text">
            <up-text color="#777" size="32rpx" text="张小晓"></up-text>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="may-want">
      <view class="title">
        <up-text bold size="28rpx" text="你可能想找"></up-text>
      </view>
      <view class="main">
        <view class="list">
          <view class="item">
            <view class="left">
              <view class="avatar">
                <up-avatar :text="`张`" font-size="40rpx" randomBgColor size="70rpx"></up-avatar>
              </view>
              <view class="user">
                <view class="header">
                  <p class="name">
                    <span style="color: blue;">张</span>晓栀
                  </p>
                  <p class="id">1009000</p>
                </view>
                <view class="school">
                  <up-text text="艺术学院/艺术设计"></up-text>
                </view>
                <view v-if="true" class="recent">近30天添加1个
                </view>
                <view v-else class="no-recent">
                  最近没有添加任何标签
                </view>
              </view>
            </view>
            <view class="right">
              <up-icon color="#2e6bf8" name="man-add-fill" size="32rpx"></up-icon>
              <up-icon color="#29c671" name="phone-fill" size="32rpx"></up-icon>
            </view>
          </view>
          <view class="item">
            <view class="left">
              <view class="avatar">
                <up-avatar :text="`张`" font-size="40rpx" randomBgColor size="70rpx"></up-avatar>
              </view>
              <view class="user">
                <view class="header">
                  <p class="name">
                    <span style="color: blue;">张</span>晓栀
                  </p>
                  <p class="id">1009000</p>
                </view>
                <view class="school">
                  <up-text text="艺术学院/艺术设计"></up-text>
                </view>
                <view v-if="true" class="recent">近30天添加1个
                </view>
                <view v-else class="no-recent">
                  最近没有添加任何标签
                </view>
              </view>
            </view>
            <view class="right">
              <up-icon color="#2e6bf8" name="man-add-fill" size="32rpx"></up-icon>
              <up-icon color="#29c671" name="phone-fill" size="32rpx"></up-icon>
            </view>
          </view>
          <view class="item">
            <view class="left">
              <view class="avatar">
                <up-avatar :text="`张`" font-size="40rpx" randomBgColor size="70rpx"></up-avatar>
              </view>
              <view class="user">
                <view class="header">
                  <p class="name">
                    <span style="color: blue;">张</span>晓栀
                  </p>
                  <p class="id">1009000</p>
                </view>
                <view class="school">
                  <up-text text="艺术学院/艺术设计"></up-text>
                </view>
                <view v-if="false" class="recent">近30天添加1个
                </view>
                <view v-else class="no-recent">
                  最近没有添加任何标签
                </view>
              </view>
            </view>
            <view class="right">
              <up-icon color="#2e6bf8" name="man-add-fill" size="32rpx"></up-icon>
              <up-icon color="#29c671" name="phone-fill" size="32rpx"></up-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  background-color: #F3F5F9;
  padding: 30rpx;
  height: calc(100vh - 90rpx);

  .search-box {
    background-color: #fff;
    border-radius: 30rpx;
  }

  .want {
    .header {
      margin: 34rpx 0;
      display: flex;
      justify-content: space-between;
    }

    .main {
      .pre-select {
        display: flex;
        justify-content: space-between;
      }
    }
  }

  .may-want {
    .title {
      margin: 32rpx 0;
    }

    .main {
      .list {
        .item {
          margin: 20rpx 0;
          padding: 26rpx 32rpx;
          width: 686rpx;
          height: 200rpx;
          background: #FFFFFF;
          box-shadow: 0 6rpx 12rpx 0 #dae4f080;
          border-radius: 24rpx;
          filter: blur(0);
          display: flex;
          align-items: flex-start;
          justify-content: space-between;

          .left {
            display: flex;

            .user {
              margin-left: 24rpx;

              .header {
                display: flex;

                .name {
                  font-size: 32rpx;
                  font-weight: 700;
                }

                .id {
                  margin-left: 30rpx;
                }
              }

              .school {
                margin: 12rpx 0;
                font-size: 24rpx;
                color: #393939;
              }

              .recent {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 200rpx;
                height: 48rpx;
                background: rgba(46, 107, 248, .2);
                border-radius: 24rpx;
                font-size: 24rpx;
                color: #2E6BF8;
              }

              .no-recent {
                margin-top: 26rpx;
                color: #8798c0;
                font-size: 24rpx;
                font-weight: 400;
                line-height: 0;
                letter-spacing: 0;
                text-align: left;
              }
            }
          }

          .right {
            display: flex;
            width: 120rpx;
            justify-content: space-between;
            margin-right: 20rpx;
          }
        }
      }
    }
  }
}
</style>